<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./libs/layui/css/layui.css">
  <script src="./libs/jquery.min.js"></script>
  <script src="./libs/layui/layui.js"></script>
  <style>
    html,body{
      height: 100%;
    }
    body{
      background: #ffffff;
      background-image: url('./imgs/loginBg.png');
      background-size: cover;
    }
    .bgBox {
      min-width: 1512px;
      height: calc(100% - 55px);
      padding-top: 55px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .loginMain {
      flex: 1;
      box-sizing: border-box;
      padding-bottom: 20px;
      height: calc(100% - 20px);
    }
    .login-header {
      padding-left: 100px;
    }

    .login-header img {
      width: 196px;
      height: 54px;
      object-fit: cover;
      margin-right: 18px;
    }

    .login-header span {
      font-weight: 500;
      font-size: 30px;
      color: #1B4675;
    }


    .login-content {
      margin: 0 auto;
      display: flex;
      justify-content: center;
    }

    .login-content img {
      width: 898px;
      height: 523px;
      margin-right: 52px;
      margin-top: 95px;
    }

    .login-content .login-titleBox {
      width: 553px;
    }

    .login-content .login-title {
      width: 553px;
      margin-bottom: 73px;
      line-height: 30px;
      font-size: 30px;
      font-weight: 400;
      color: #333333;
    }

    .login-content .login-form {
      margin: 0 auto;
      width: 488px;
      /* height: 486px; */
      padding: 60px 0;
      background: #ffffff;
      box-shadow: 0px 8px 50px 0px rgba(95, 122, 165, 0.18);
    }

    .login-form .login-form-title {
      /* margin: 60px 0 45px 0; */
      line-height: 28px;
      text-align: center;
      font-size: 28px;
      font-weight: 500;
      color: #0b57bf;
      margin-bottom: 45px;
    }

    #get-code-btn {
      width: 136px;
      height: 50px;
      line-height: 50px;
      background: #eff6ff;
      border: 1px solid rgba(11, 87, 191, 0.50);
      font-size: 14px;
      color: #0b57bf;
    }

    #get-code-btn:disabled {
      cursor: not-allowed;
    }

    .layui-form-label {
      position: absolute;
    }

    .layui-form-label img {
      position: absolute;
      right: -41px;
      z-index: 99;
      width: 20px;
      height: 20px;
      margin-top: 5px;
    }

    .layui-input-block {
      margin: 0 70px;
      line-height: 50px;
    }

    .layui-input-block .layui-input {
      height: 50px;
      padding-left: 35px;
    }

    .loginBtn {
      margin-top: 21px;
      width: 100%;
      font-size: 18px;
      height: 50px;
      background: #0b57bf;
      border-radius: 5px;
    }

    .layui-form-item {
      margin-bottom: 24px;
    }

    .layui-form-item:last-child {
      margin-bottom: 0;
    }

    .layui-input:focus {
      border: 1px solid #0B57BF !important;
    }
  </style>
</head>

<body>
  <div class="bgBox">
    <div class="login-header">
      <img src="./imgs/信创logo.png">
      <span>职领未来教育系统</span>
    </div>
    <div class="loginMain">
      <div class="login-content">
        <img src="./imgs/loginImg.png" alt="">
        <div class="login-titleBox">
          <p class="login-title">信息系统运维管理-2024年9月第一批考试</p>
          <div class="login-form">
            <p class="login-form-title">考生登录</p>
            <form class="layui-form" action="">
              <div class="layui-form-item">
                <label class="layui-form-label"><img src="./imgs/user.png" alt=""></label>
                <div class="layui-input-block">
                  <input type="text" name="idCard" required lay-verify="required|identity" placeholder="请输入身份证号"
                    autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label"><img src="./imgs/mobile.png" alt=""></label>
                <div class="layui-input-block">
                  <input type="text" name="phone" required lay-verify="required|phone" placeholder="请输入手机号"
                    autocomplete="off" class="layui-input demo-phone">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label"><img src="./imgs/code.png" alt=""></label>
                <div class="layui-input-block" style="display: flex;">
                  <input type="text" name="code" required lay-verify="required" placeholder="请输入验证码" autocomplete="off"
                    class="layui-input" style="flex: 1;margin-right: 16px;">
                  <button class="layui-btn" id="get-code-btn">获取验证码</button>
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn loginBtn" lay-submit lay-filter="login">登录</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div style="text-align: center;">
      <p>主管单位：人力社会资源和社会保障部社会保障能力建设中心</p>
      <p>承办单位：北京职领未来教育科技有限公司</p>
    </div>
  </div>
  <div class="layui-form" action="" id="codeAlert" style="display: none;padding: 30px 40px;">
    <div class="layui-form-item" style="margin-bottom: 10px;border: none;">
      <input type="text" name="captcha" lay-verify="required" lay-reqText="请输入图形验证码" autocomplete="off"
        placeholder="请输入图形验证码" class="layui-input" id="imgCode">
    </div>
    <div><img src="./imgs/captCode.png" alt="" id="codeImg" style="cursor: pointer;width: 100%;height: 50px;"></div>
    <div style="text-align: center;margin-top: 16px;">
      <button type="button" class="layui-btn layui-btn-danger" id="postCode" style="background: #0b57bf">确定发送</button>
    </div>
  </div>
  </div>
</body>
<script>
  layui.use(['laytpl', 'form'], function () {
    var laytpl = layui.laytpl,
      form = layui.form,
      codeLayer,  //验证码弹窗
      captchaId;  //验证码图片ID
    // 初始化验证码
    getCaptchaId();
    // 获取验证码图片ID
    function getCaptchaId() {
      // ajax({
      //   url: "/captcha/getCaptchaId",
      //   type: "post",
      //   success: function (res) {
      //     captchaId = res.data
      //   },
      // });
    }
    // 倒计时
    function countDown() {
      var btn = document.getElementById('get-code-btn');
      var count = 60; // 倒计时秒数
      btn.disabled = true; // 禁用按钮
      btn.innerText = count + ' 秒后重新发送';
      var timer = setInterval(function () {
        if (count === 0) {
          clearInterval(timer);
          btn.disabled = false;
          btn.innerText = '重新发送';
        } else {
          btn.innerText = count-- + ' 秒后重新发送';
        }
      }, 1000);
    }
    // 点击图形验证码刷新验证码
    $('#codeImg').click(function () {
      if (captchaId) {
        // 获取图片地址
        var imgUrl = 'xxxxxxx' + "?captchaId=" + captchaId + "&d=" + new Date().getTime();
        document.getElementById('codeImg').src = imgUrl;
      } else {
        getCaptchaId();
      }
    })
    // 获取验证码点击
    $('#get-code-btn').click(function (e) {
      e.preventDefault(); // 阻止默认行为
      var isValid = form.validate('.demo-phone');  // 注：v2.7.0 新增
      // 验证不通过
      if (!isValid) {
        return false;
      }
      $('#codeImg').trigger('click');
      codeLayer = layer.open({
        type: 1,
        title: "图形验证码",
        content: $("#codeAlert"),
        cancel: function () {
          $("#codeAlert").hide()
        }
      });
      return false;
    });
    // 确定发送
    $("#postCode").on("click", function () {
      if (!$("input[name='captcha']").val().length) {
        layer.msg('必填项不能为空', { icon: 5 });
        return;
      }
      var captcha = $("input[name='captcha']").val();
      //校验验证码
      $.ajax({
        url: "/account_info/modifyAnswerSendSmsCaptcha",
        type: "post",
        data: { captchaId, captcha },
        success: function (res) {
          $("#codeAlert").hide()
          layer.close(codeLayer);
          // 倒计时
          countDown();
        },
        //异常处理
        error: function (e) {
          //
        },
      });
    });
    // 监听提交事件
    form.on('submit(login)', function (data) {
      // layer.msg(JSON.stringify(data.field), { time: 20000 });
      /*       
            data.field 表单数据
            发送请求登录
       */
      return false; // 阻止表单提交
    });
  });
</script>

</html>